<template>
    <a-card class="person">
        <h2>
            姓名：{{ name }}
        </h2>
        <h2>
            年龄：{{ age }}
        </h2>
        <h2>
            地址：{{ address }}
        </h2>
        <a-button type="primary" @click="changename">
            修改名字
        </a-button>
        <a-button type="primary" @click="changeage"><!-- @为v-on 指令的缩写，用于绑定事件监听器 @click 是 v-on:click -->
            修改年龄
        </a-button>
        <a-button type="primary" @click="showTel">
            查看联系方式
        </a-button>
    </a-card>

    <a-card class="index">
        <h2>
            一辆{{ car.brand }}{{ car.price }}
        </h2>
        <a-button type="primary" @click="changeprice">
            修改汽车价格
        </a-button>
    </a-card>

    <a-card class="person">
        <h2>
            汽车列表：
        </h2>
        <ul>
            <li v-for="g in cars" :key="g.id">{{ g.name }}</li>
            <!-- v-for 指令，用于遍历整个数组key 绑定，用于为每个生成的 <li> 元素提供一个唯一的标识符。g.id 是每个 cars 数组元素的 id 属性，用于作为 key 属性 -->
        </ul>
    </a-card>

    <a-card class="index">
        姓：<input type="text" v-model="firstname"><!-- v-model 指令，用于实现双向数据绑定 -->
        <br>
        名：<input type="text" v-model="lastname">
        <br>
        全名：<span>{{ fullname }}</span>
        <br>
        <a-button type="primary" @click="changefullname">
            修改全名
        </a-button>
    </a-card>

    <a-card class="person">
        <h2>
            watch 监听ref基本数据
            <!-- watch可监听基本类型数据，也可监听对象类型数据，也可监听数组类型数据，也可监听函数类型数据（getter） -->
        </h2>
        <a-button type="primary" @click="changesum">
            修改sum
        </a-button>
        <br>
        <h2>
            watch 监听ref对象数据
        </h2>
        <br>
        {{ car.price }}
        <a-button type="primary" @click="changeprice"><!-- @为v-on 指令的缩写，用于绑定事件监听器 @click 是 v-on:click -->
            修改汽车价格
        </a-button>
    </a-card>

    <div style="background: skyblue; padding: 50px">
        <a-card title="watcheffect" :bordered="false" style="width: 500px">
            水温：{{ temp }}℃
            <br>
            水位：{{ height }}m
            <br>
            <a-button type="primary" @click="changetemp">更改水温</a-button>
            <a-button type="primary" @click="changeheight">更改水位</a-button>
        </a-card>
        <br>
        <h1>北京</h1>
        <h2 ref="title2">上海</h2>
        <h3>广州</h3>
        <a-card title="ref标签属性" :bordered="true" style="width: 500px">
            <a-button type="primary" @click="showlog">查找h2元素</a-button>
        </a-card>
    </div>

    <a-card class="demo">
        <img v-for="(dog, index) in dogList" :src="dog" :key="index">
        <!-- v-for遍历doglist数组，index为索引 -->
        <br>
        <a-button type="primary" @click="getdog">来一只柯基</a-button>
    </a-card>

    <a-card class="demo">
        <div class="person">
            <ul>
                <li v-for="news in detailList" :key="news.id">
                    <!-- 子路由 -->

                    <!-- query传参 -->
                    <!--
                    <RouterLink :to="{
                        path: '/note/detail',
                        query: {
                            id: news.id,
                            title: news.title,
                            content: news.content
                        }
                    }">{{ news.title }}</RouterLink>
                    <RouterLink :to="`/note/detail?id=${news.id}&title=${news.title}&content=${news.content}`">{{ news.title }}</RouterLink> -->
                    <!-- params传参 -->
                    <RouterLink :to="{
                        name: 'detail',
                        params: {
                            id: news.id,
                            title: news.title,
                            content: news.content
                        }
                    }">{{ news.title }}</RouterLink>
                </li>
            </ul>
        </div>
        <div class="content">
            <RouterView></RouterView>
        </div>
    </a-card>

    <a-card class="person" style=" height: 300px;">

        <RouterLink class="active" to="/props">1. props(父<->子)（只读）</RouterLink>
        <RouterLink class="active" to="/event">2. 自定义事件(子->父)</RouterLink>
        <RouterLink class="active" to="/mitt">3. mitt(任意组件通信)</RouterLink>
        <RouterLink class="active" to="/model">4. v-model(双向响应)</RouterLink>
        <RouterLink class="active" to="/attrs">5. $attrs(祖<->孙)</RouterLink>
        <RouterLink class="active" to="/ref-parent">6. $refs(父->n*子)（读写）、$parent(子->父)</RouterLink>
        <RouterLink class="active" to="/provide-inject">7.provide(提供)、inject(注入)(祖<->所有后代)</RouterLink>
        <RouterLink class="active" to="/slot">8. slot(插槽)</RouterLink>
    </a-card>

    <a-card class="demo">
        <h1>自定义ref(延迟响应)</h1>
        <h2>{{ msg }}</h2>
        <input type="text" v-model="msg">
    </a-card>
</template>

<script setup lang="ts" name="person">
// 引入组件
//#region 
import {
    ref,// 仅使用ref即可，可定义基本类型和对象类型
    computed,
    watch,
    watchEffect,
} from 'vue';


import axios from "axios";

// 引入 Ant Design Vue 组件
import AntDesignVue from 'ant-design-vue';
// 引入 Ant Design Vue 的样式文件
import 'ant-design-vue/dist/reset.css';

import useMsgRef from '@/hooks/useMsgRef';

import { RouterView, RouterLink } from 'vue-router';// 引入 RouterView 和 RouterLink 组件

//#endregion

// 数据
//#region 
const name = ref('asd');
const age = ref(12);
const tel = '123123';
const address = 'asdasd';

const car = ref({
    brand: '奔驰',
    price: 1000000
});

const cars = ref([
    { id: '01', name: '奔驰' },
    { id: '02', name: '宝马' },
    { id: '03', name: '兰博基尼' }
]);

const firstname = ref('zhang');
const lastname = ref('san');

const sum = ref(10);

const temp = ref(10);
const height = ref(100);

const dogList = ref([
    "https://images.dog.ceo//breeds//pembroke//n02113023_5032.jpg",
]);

// 使用Vue提供的默认ref定义响应式数据，数据一变，页面就更新
// let msg = ref('你好')

// 使用useMsgRef来定义一个响应式数据且有延迟效果
let { msg } = useMsgRef('你好', 2000)

//#endregion

// 方法
//#region 
function changename() {
    name.value = 'qwe';
}
function changeage() {
    age.value += 1;
}
function showTel() {
    alert(tel);
}

function changeprice() {
    car.value.price += 100000;
}

function changefullname() {
    firstname.value = 'li';
    lastname.value = 'si';
}
/* 
const fullname = computed(() => {  计算属性(直接放入变量即可，不需要使用方法)
     return firstname.value.slice(0,1).toUpperCase() + firstname.value.slice(1) + "-" + lastname.value;//（只读）
})
*/
const fullname = computed({// 计算属性(直接放入变量即可，不需要使用方法，可读可写)
    get() {
        return firstname.value.slice(0, 1).toUpperCase() + firstname.value.slice(1) + "-" + lastname.value;
    },
    set(val) {
        const [str1, str2] = val.split('-');// 使用解构赋值将字符串分割为两个部分
        firstname.value = str1;
        lastname.value = str2;
    }
});

function changesum() {
    sum.value += 1;
}
watch(sum, (newVal, oldVal) => {
    console.log(`sum+1,新值为${newVal}，旧值为${oldVal}`);
})
watch(car, (newValue, oldValue) => {
    ; console.log(`新值为${newValue.price}，旧值为${oldValue.price}`)
}, {
    deep: true,// 开启深度监听
    immediate: false// 立即执行
})
// 监听reactive对象数据，默认开启深度监听，且地址发生变化时才会触发
// 只监听响应式对象中的某个属性，且该属性为基本类型时，要写成函数形式
watch(() => car.value.price, (newValue, oldValue) => {
    console.log(`新值为${newValue}，旧值为${oldValue}`)
}, {
    deep: true
})
function changetemp() {
    temp.value += 10;
}

function changeheight() {
    height.value += 10;
}
/*
watch([temp,height],(value) => {
    console.log(`新值为${value}`)
    const [newtemp, newheight] = value;
    if (newtemp > 50 || newheight > 150) {
        console.log(`水温过高或水位过高，停止加热`)
        temp.value = 0;
        height.value = 0;
    }
})
*/
watchEffect(() => {// 监听多个响应式数据，不需要明确指出监听的数据
    if (temp.value > 50 || height.value > 150) {
        alert(`水温过高或水位过高，停止加热`)
        temp.value = 0;
        height.value = 0;
    }
})

// 创建一个title2，用于存储ref标记的内容
const title2 = ref();
function showlog() {
    console.log(title2.value);
}

import { type PersonInter, type Personlist } from '@/types';

/*
const person:PersonInter ={
    name: '王五',
    age: 100,
    id: '北京'
} 
const persolist: Array<PersonInter> = [
    {
        name: '张三',
        age: 100,
        id: '北京'
    },
    {
        name: '李四',
        age: 100,
        id: '上海'
    },
    {
        name: '王五',
        age: 100,
        id: '广州'
    }
]
    const persolist: Personlist = [
    {
        name: '张三',
        age: 100,
        id: '北京'
    },
    {
        name: '李四',
        age: 100,
        id: '上海'
    },
    {
        name: '王五',
        age: 100,
        id: '广州'
    }
]
*/

// import { defineProps , withDefaults} from 'vue'
// 第一种写法：仅接收
// const props = defineProps(['list'])

// 第二种写法：接收+限制类型
// defineProps<{list:Persons}>()

// 第三种写法：接收+限制类型+指定默认值+限制必要性
const props = withDefaults(defineProps<{ list?: Personlist }>(), {
    list: () => [{ id: 'asdasg01', name: '小猪佩奇', age: 18 }]
})


async function getdog() {
    try {
        const result = await axios.get(
            // axios发送HTTP请求,await等待请求结果
            "https://dog.ceo/api/breed/pembroke/images/random"
        );
        dogList.value.push(result.data.message); // 将获取到的图片 URL推送到dogList数组中
    } catch (error) {
        alert("获取失败");
    }
}


const detailList = ref([
    {
        id: '1',
        title: "detail1",
        content: "detail1 content"
    },
    {
        id: '2',
        title: "detail2",
        content: "detail2 content"
    },
    {
        id: '3',
        title: "detail3",
        content: "detail3 content"
    }
])
//#endregion
</script>

<style scoped>
.person {
    background-color: rgb(204, 213, 220);
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

.index {
    background-color: rgb(141, 149, 155);
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

.demo {
    background-color: rgb(98, 172, 228);
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 10px;
}

body {
    background-color: #2c2f35;
    background-image: url('#');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

img {
    height: 300px;
    margin-right: 10px;
}

.content {
    margin: 0 auto;
    margin-top: 30px;
    border-radius: 10px;
    width: 90%;
    height: 400px;
    border: 1px solid;
}

.active {
    margin: 0 10px;
    color: #0c6cf2;
    font-size: 16px;
}
</style>